<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>更换头像</span>
    </div>
    <!-- 图片，用来展示用户选择的头像 -->
    <img src="../../assets/images/avatar.jpg" alt="" class="preview" v-if="url === ''" />
    <img :src="url" alt="" class="preview" v-else />
    <div class="button">
      <input
        type="file"
        ref="fileRef"
        style="text-indent: -99999px; display: none"
        @change="preview"
      />
      <el-button type="primary" @click="$refs.fileRef.click()"
        ><i class="el-icon-plus"></i> 选择图片</el-button
      >
      <el-button type="success" :disabled="url === ''" @click="updateAvatar"
        ><i class="el-icon-upload"></i> 上传头像</el-button
      >
    </div>
  </el-card>
</template>

<script>
import { updateAvatarAPI } from '@/api/user'
export default {
  data() {
    return {
      url: ''
    }
  },
  methods: {
    preview(e) {
      // console.dir(e.target)
      // e.target 就是事件源,  也就是input:file

      // console.log(e.target.files[0])
      if (e.target.files.length > 0) {
        // 如果文件对象长度大于0 ,说明选择图片

        // console.log(1)
        // 获取文件对象
        const fileObj = e.target.files[0]
        // console.log(fileObj)

        // 方法一: URL.createObjectURL()
        // const url = URL.createObjectURL(fileObj)
        // console.log(url)
        // this.url = url

        // 方法二 : new FileReader.readAsDataURL(fileObj)
        // 1. 通过 FileReader 得到base64格式,
        const fr = new FileReader()
        fr.readAsDataURL(fileObj)

        // 2.下面的加载事件,必须使用箭头函数,否则this就表示事件源了 e
        fr.onload = () => {
          // console.log(fr.result) // base64
          this.url = fr.result
        }
      } else {
        this.url = ''
      }
    },
    async updateAvatar() {
      const { data: res } = await updateAvatarAPI(this.url)
      if (res.code !== 0) return this.$message.error(res.$message)
      this.$message.success(res.message)
      this.$store.dispatch('user/getUser')
      this.url = ''
    }
  }
}
</script>

<style lang="less" scoped>
.button {
  margin-top: 15px;
  i {
    padding-right: 4px;
  }
}
.preview {
  object-fit: cover;
  width: 350px;
  height: 350px;
}
</style>
